<template>
    <el-dialog
        :visible.sync="visible"
        width="50%"
        :title="edit ? '修改销售活动' : '查看销售活动'"
        destroy-on-close
    >
        <el-row type="flex" style="margin-bottom: 12px;">
            <el-avatar shape="square" :size="50" :src="pendingForm.resourceUrl">
                <img :src="pendingForm.resourceUrl" />
            </el-avatar>
            <div class="goods-info">
                <div class="goods-name" :title="pendingForm.goodsName">
                    {{ pendingForm.goodsName }}
                </div>
                <div>
                    <span class="goods-price">￥ {{ formatMoney(pendingForm.sellPrice) }}</span>
                    <span class="goods-unit" :title="pendingForm.unit">{{ pendingForm.unit }}</span>
                </div>
            </div>
        </el-row>
        <el-form ref="salingFormRef" :model="salingForm" :rules="salingFormRule">
            <el-row type="flex" justify="space-between">
                <el-form-item label="商品售价">
                    <el-input :value="pendingForm.sellPrice" disabled></el-input>
                </el-form-item>
                <el-form-item label="供货商价格">
                    <el-input :value="pendingForm.supplyPrice" disabled></el-input>
                </el-form-item>
                <el-form-item label="团长佣金">
                    <el-input :value="pendingForm.sellPrice" disabled></el-input>
                </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-form-item prop="times" label="销售时间" required>
                    <el-date-picker
                        :disabled="!edit"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="salingForm.times"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item prop="limitOrderCount" label="每人限购" required>
                    <el-input v-model="salingForm.limitOrderCount" :disabled="!edit"></el-input>
                </el-form-item>
                <el-form-item
                    prop="takeGoodsDays"
                    label="提货时间"
                    style="margin-right:24px"
                    required
                >
                    <el-select
                        v-model="salingForm.takeGoodsDays"
                        placeholder="提货时间"
                        :disabled="!edit"
                    >
                        <el-option label="次日" :value="1"></el-option>
                        <el-option label="第三天" :value="2"></el-option>
                        <el-option label="第四天" :value="3"></el-option>
                        <el-option label="第五天" :value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-form-item prop="totalGoodsCount" label="活动总数量" required>
                    <el-input v-model="salingForm.totalGoodsCount" :disabled="!edit"></el-input>
                </el-form-item>
                <el-form-item prop="preSalesCount" label="虚拟已售商品数">
                    <el-input v-model="salingForm.preSalesCount" :disabled="!edit">></el-input>
                </el-form-item>
                <el-form-item prop="preHitCount" label="虚拟点击数">
                    <el-input v-model="salingForm.preHitCount" :disabled="!edit">></el-input>
                </el-form-item>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="onEditSaling" type="primary">确认</el-button>
            <el-button @click="handleHideSaling">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { editActivity, getActivityDetail } from '@/api/activity';
import { formatMoney } from '@/utils/goods';
export default {
    props: {
        visible: {
            type: [Boolean, Object],
            default: false
        },
        edit: {
            type: [Boolean],
            default: false
        },
        activityId: {
            type: [String, Object],
            default: null
        },
        goodsId: {
            type: [String, Object],
            default: null
        },
        goodsSkuId: {
            type: [String, Object],
            default: null
        }
    },
    data() {
        return {
            pendingForm: {
                resourceUrl: '',
                goodsName: '',
                unit: '',
                sellPrice: null
            },
            salingForm: {
                activityId: null,
                goodsId: null,
                goodsSkuId: null,
                times: null,
                startTime: null,
                endTime: null,
                limitOrderCount: null,
                takeGoodsDays: null,
                totalGoodsCount: null,
                preSalesCount: null,
                preHitCount: null
            },
            salingFormRule: {
                limitOrderCount: [{ required: true, message: '请填写每人限购', trigger: 'blur' }],
                takeGoodsDays: [{ required: true, message: '请选择提货时间', trigger: 'blur' }],
                totalGoodsCount: [{ required: true, message: '请填写活动总数量', trigger: 'blur' }],
                // preSalesCount: [
                //     { required: true, message: '请填写虚拟已售商品数', trigger: 'blur' }
                // ],
                // preHitCount: [{ required: true, message: '请填写虚拟点击数', trigger: 'blur' }],
                times: [
                    {
                        type: 'array',
                        required: true,
                        message: '请选择销售日期范围',
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    created() {
        this.salingForm.goodsId = this.goodsId;
        this.salingForm.goodsSkuId = this.goodsSkuId;
        this.salingForm.id = this.activityId;
        this.fetchDetail(this.activityId);
    },
    mounted() {},
    methods: {
        fetchDetail(activityId) {
            getActivityDetail(activityId).then(res => {
                if (res.data.success) {
                    this.pendingForm.resourceUrl = res.data.data.resourceUrl;
                    this.pendingForm.goodsName = res.data.data.goodsName;
                    this.pendingForm.unit = res.data.data.unit;
                    this.pendingForm.supplyPrice = res.data.data.supplyPrice;

                    this.salingForm.takeGoodsDays = res.data.data.takeGoodsDays;
                    this.salingForm.times = [res.data.data.startTime, res.data.data.endTime];
                    this.salingForm.limitOrderCount = res.data.data.limitOrderCount;
                    this.salingForm.totalGoodsCount = res.data.data.totalGoodsCount;
                    this.salingForm.preSalesCount = res.data.data.preSalesCount;
                    this.salingForm.preHitCount = res.data.data.preHitCount;
                }
            });
        },
        onEditSaling() {
            if (!this.edit) {
                this.$emit('hide');
                return;
            }
            this.$refs.salingFormRef.validate(valid => {
                if (valid) {
                    editActivity(this.salingForm).then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: '修改销售成功!',
                                type: 'info',
                                duration: 1000
                            });
                            this.$emit('hide');
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error',
                                duration: 3000
                            });
                        }
                    });
                } else {
                    this.$message({
                        message: '表单填写不正确！',
                        type: 'error',
                        duration: 3000
                    });
                    return false;
                }
            });
        },
        handleHideSaling() {
            this.$emit('hide');
        },
        formatMoney(num) {
            return formatMoney(num);
        }
    }
};
</script>
<style lang="scss" scoped></style>
